<!doctype html>
<html lang="en">

<head>
	<title>Home</title>
	{%include file="public/head_common" /%}
	<!-- Pager CSS -->
<link rel="stylesheet" href="__STATIC__/assets/css/plug.css">
<style type="text/css">
	.table > tbody > tr > td{
		border-top:0px;
	}
	.table > tbody + tbody {
    	border-top: 1px solid #ddd;
	}
	.tips{
		position: absolute;
		z-index: 999;
		width: 100%;
		min-height: 100px;
		background: #fff;
		border: 1px solid #ddd;
		box-shadow: 2px 2px 2px #888888;
		padding: 5px;
	}
	.tips>div{
		margin: 2px 0px;
		cursor: pointer;
	}
	.tips>div:hover{
		color: #00AAFF;
	}
	.tips>div>span:first-child{
		display: inline-block;
		width: 32px;
	}
</style>
</head>

<body>
	<!-- MAIN -->
	<div class="main" id="app">
		<!-- MAIN CONTENT -->
		<div class="main-content">
			<ul class="breadcrumb">
			    <li>订单管理</li>
			    <li>待报订单</li>
			</ul>
			<div class="container-fluid">
				<div class="row" style="margin-bottom: 10px;">
					<form class="form-inline">
						提交日期：<input type="text" size="10" name="date1" onclick="WdatePicker()">
				 		- <input type="text" size="10" name="date2" onclick="WdatePicker()">
						<select class="form-control" v-model="search.goods_categories_type">
							<option value=""> - 选择分类 - </option>
							<option v-for="item in base.types" :value="item.val"> {{ item.name }} </option>
						</select>
						<vue-select 
							placeholder="类别"
							v-model="search.cate_name"
							url="{%:url('Goods/getCateListBySort')%}"
							:sorts ="['衣服','下装','鞋','箱包','饰品']"
							style="display: inline-block;width: 100px;">
						</vue-select>
						<vue-select 
							placeholder="品牌"
							v-model="search.brand_name"
							url="{%:url('Brand/getListBySort')%}"
							:sorts ="['AB','CD','EF','GH','IJ','KL','MN','OP','QR','ST','UV','WX','YZ']"
							style="display: inline-block;width: 100px;">
						</vue-select>
						<vue-select 
							placeholder="销售"
							v-model="search.acct_name"
							url="{%:url('Account/getSalers')%}"
							style="display: inline-block;width: 100px;">
						</vue-select>
						<input type="text" class="form-control" placeholder="客户" size="6" v-model="search.cust">
						<input type="text" class="form-control" placeholder="订单号" size="6" v-model="search.order_no">
					    <button type="button" class="btn btn-primary search" @click="getList()">查询</button>
					</form>
				</div>
				<!-- 数据开始-->
				<div class="row" id="result">
					<table class="table table-hover table-condensed">
						<thead>
							<tr>
								<th>订单号</th>
								<th>客户</th>
								<th>销售</th>
								<th>订单时间</th>
								<th>序号</th>
								<th>商品</th>
								<th>名称</th>
								<th>数量与尺码</th>
								<th>颜色</th>	
								<th>单价</th>
								<th>备注</th>
								<th>状态</th>
								<th>操作</th>	
							</tr>
						</thead>
						<tbody v-for="row in rows">
							<tr v-for="item,i in row.items">
								<td v-if="i==0">{{ item.order_no }}</td>
								<td v-if="i==0">{{ item.cust }}</td>
								<td v-if="i==0">{{ item.acct_name }}</td>
								<td v-if="i==0">{{ item.add_day }}
									<span style="font-size: 12px;color: #aaa">{{ item.add_time }}</span>
								</td>
								<td v-if="i>0" colspan="4"></td>
								<td>{{ item.order_sn }}</td>
								<td>
									<a :href="item.pic" target="_BLANK" class="pre_view"><img :src="item.pic_tmb" height="38"></a>
								</td>
								<td>{{ item.name }}</td>
								<td>{{ item.qty }} * {{ item.spec }}</td>
								<td>{{ item.color }}</td>
								<td>{{ item.price }}</td>
								<td>{{ item.remarks }}</td>
								<td>
									<span class="label" :class="progress_class[item.progress]">
									{{ item.progress_desc }}</span>
								</td>
								<td>
									<a href="javascript:;" class="btn btn-sm btn-danger"  v-if="userInfo.role_id!=7"
									@click="cancelItem(item)">取消</a>
									<a href="javascript:;" class="btn btn-sm btn-primary"  v-if="userInfo.role_id!=7"
									@click="purchase(item)">报单</a>
								</td>
								
							</tr>
						</tbody>
					</table>
					<div>
						<vue-page :total_page='total_page' :cur_page='cur_page' @do-page='getList'></vue-page>
					</div>
				</div>
				<!-- 数据结束-->				
			</div>
		</div>
		<!-- END MAIN CONTENT -->
		<vue-modal title="报单" :visible.sync="showModal">
			<div class="form-horizontal" style="width: 95%;">
				<div class="form-group">
					<label class="col-sm-3 control-label">订单号 / 销售</label>
					<div class="col-md-5 form-control-static">
						{{ purchase_info.order_no }}-{{ purchase_info.order_sn }} | {{ purchase_info.saler }}</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">商品</label>
					<div class="col-md-3 form-control-static">{{ purchase_info.goods_name }}</div>
					<div class="col-sm-1"><img :src="purchase_info.pic" height="220" style="position: absolute;"></div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">颜色 | 尺码</label>
					<div class="col-md-5 form-control-static">
						{{ purchase_info.color }} | {{ purchase_info.spec }} * {{ purchase_info.order_qty }}
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">售价</label>
					<div class="col-md-5 form-control-static">
						{{ purchase_info.goods_price }}
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">档口</label>
					<div class="col-md-2">
						<input type="text" class="form-control auto-cm" placeholder="档口"
						v-model="purchase_info.stall_name" 
						@input="getStall">
						<div class="tips" v-show="stall_rows.length>0">
							<div v-for="row in stall_rows" @click="choose(row)">
								<span>{{ row.pos }}</span>
								<span>{{ row.name }}</span>
							</div>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">工厂价</label>
					<div class="col-md-2">
						<input type="text" class="form-control" placeholder="工厂价" v-model="purchase_info.price">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">运费</label>
					<div class="col-md-2">
						<input type="text" class="form-control" placeholder="运费" v-model="purchase_info.factory_price">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">备注</label>
					<div class="col-sm-3">
						<textarea class="form-control" rows="2" style="resize: none;" v-model="purchase_info.remarks"></textarea>
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-offset-3 col-sm-5">
						<button type="button" class="btn btn-primary" @click="submitForm()">确认报单</button>
					</div>
				</div>
			</div>
		</vue-modal>
	</div>
	<!-- Javascript -->
	<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
	<script src="__STATIC__/assets/vendor/vue.js"></script>
	<script src="__STATIC__/components/vue-page.js"></script>
	<script src="__STATIC__/components/vue-select.js?q=1"></script>
	<script src="__STATIC__/components/vue-modal.js"></script>
	<script src="__STATIC__/assets/vendor/My97DatePicker/WdatePicker.js"></script>
	<script src="__STATIC__/assets/vendor/layer-v3.1.1/layer/layer.js"></script>
	<script type="text/javascript">
		
		var vm = new Vue({
			el: '#app',
			data: {
				search:{
					cate_name: '',
					brand_name: '',
					acct_name: '',
					progress: '',
					cust: '',
					order_no: '',
					goods_categories_type:''
				},
				rows: [],
				total_page: 0,
				cur_page: 1,
				progress_class: ['label-danger','label-primary','label-info','label-warning','label-success','red','orange','','','','label-danger'],
				showModal: false,
				purchase_info: {},
				timer: null,
				stall_rows: [],
				base: {
					types: [
						{val: 1,name:'衣服'},
						{val: 2,name:'下装'},
						{val: 3,name:'鞋'},
						{val: 4,name:'箱包'},
						{val: 5,name:'饰品'},
						{val: 6,name:'化妆品'},

						{val: 7,name:'皮具'},
						{val: 8,name:'男装'},
						{val: 9,name:'女装'},
						{val: 10,name:'男鞋'},
						{val: 11,name:'女鞋'},
						{val: 12,name:'珠宝'},
						{val: 13,name:'百货'},
					],
					units: [
						{val: 1,name:'件'},
						{val: 2,name:'双'},
						{val: 3,name:'盒'},
						{val: 4,name:'个'},
						{val: 5,name:'套'}
					]
				},
				userInfo:{},//账户信息
			},
			components: {
				'vue-page': vuePage,
				'vue-select': vueSelect,
				'vue-modal': vueModal,
			},
			created: function(){
				this.getList();
				//console.log(this.rows);
			},
			methods:{
				// 取消订单
				cancelItem: function(item){
					var _this = this;
					var cancel_info = {
						id:item.id,
						reason:'直接取消'
					}
					$.post("{%:url('Orders/cancelItem')%}",cancel_info,function(rsp){
						_this.getList();
					},'json')
				},
				getList: function(page=1){

					var data = {};
					data = this.search;
					data.progress = '1-10';
					// 添加时间搜索
					var date1 = $("input[name='date1']").val();
					var date2 = $("input[name='date2']").val();
					if (date1 && date2) {
						data['date'] = {date1,date2}
					}else{
						delete data['date'];
					}
					var _this = this;

					$.ajax({
			            url: "{%:url('Orders/getItemList')%}?page="+page,
			            type:'POST',
			            dataType: 'json',
			            data: data,
			            success:function(rsp){
			                _this.rows = rsp.data.rows;
							_this.userInfo = rsp.data.user_info;
			                _this.total_page = rsp.data.total_page;
							_this.cur_page = Number(rsp.data.page);
			            }
			        });
				},
				purchase: function(item){
					this.purchase_info = item;
					this.showModal = true;
					console.log(item);
					this.purchase_info = {
						order_item_id: item.id,
						order_no: item.order_no,
						order_sn: item.order_sn,
						goods_name: item.name,
						pic: item.pic,
						color: item.color,
						spec: item.spec,
						goods_price: item.price,
						saler: item.acct_name,
						order_qty: item.qty,
						price: '',
						factory_price: '',
						stall_name: '',
						remarks: ''
					};
				},
				getStall: function(){
					if (this.timer) {
						clearTimeout(this.timer);
					}
					var data = {
						name: this.purchase_info.stall_name
					};
					if (data.name==''){
						this.stall_rows = [];
						return;
					}
					var _this = this;
					this.timer = setTimeout(function(){
						$.post("{%:url('Stall/getList')%}",data,function(rsp){
							_this.stall_rows = rsp.data.rows;
						},'json')
					}, 500)
				},
				choose: function(row){
					this.purchase_info.stall_name = row.name;
					this.stall_rows = [];
				},
				submitForm: function(){
					var data = this.purchase_info;
					var _this = this;

					$.post("{%:url('Purchase/handle')%}",data,function(rsp){
						alert(rsp.msg);
						if (rsp.code) {
							_this.showModal = false;
							_this.getList();
						}
					},'json')
				}
			}
		});
		//关闭面板
		$(document).click(function(e){
			if ($(e.target).hasClass('auto-cm')) {
				return;
			} else {
				$('.tips').hide();
			}	
		})
		var tip_index;
		//鼠标事件
		$('table').on('mouseover','a.pre_view',function(){
			tip_index = layer.tips("<img src='"+$(this).attr('href')+"' height='220'>", this, {
				tips: [2, '#eee'],
				time: 0
			});
		}).on('mouseleave','a.pre_view',function(){
			layer.close(tip_index);
		})
	</script>
</body>

</html>